<template>
    <div>
        
        <h1>门店显示</h1>
        <div>
            门店名称:
            <input type="text" v-model.trim="info.shopName">
            开业时间:
            <input type="date" v-model="info.openTime1">-
            <input type="date" v-model="info.openTime2">
            <input type="button" value="查询" @click="getShopList" >
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店状态</td>
                    <td>开业时间</td>
                    <td>门店地址</td>
                    <td>门店类型</td>
                    <td>特色</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr>
                <tr :key="item.shopId"v-for="item in data.list" >
                    <td>{{item.shopId}}</td>
                    <td>{{item.shopName}}</td>
                    <td>{{item.branchName}}</td>
                    <td><img :src="item.photo" width="50" height="50"></td>
                    <td>{{item.state==true?'是':'否'}}</td>
                    <td>{{moment(item.openTime).format('YYYY-MM-DD hh:mm:ss')}}</td>
                    <td>{{item.addressName}}</td>
                    <td>{{item.shopType}}</td>
                    <td>{{item.teSe}}</td>
                    <td>{{item.tel}}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
         <div>
            <!-- 显示数据 -->
             <span>共{{ data.totalCount }}条</span>
             <span>每页{{ info.pageSize }}条</span>
             <span>当前第{{ info.pageIndex }}/{{data.totalPage}}页</span>
            <!-- 改变页码 -->
             <input type="button" value="首页" @click="goPage(1)" > 
             <input type="button" value="上一页" @click="goPage(info.pageIndex-1)">
             <!-- (1)循环的总页数 -->
             <input type="button" :value="item" v-for="item in data.totalPage" @click="goPage(item)" >

             <input type="button" value="下一页" @click="goPage(info.pageIndex+1)" >
             <input type="button" value="尾页" @click="goPage(data.totalPage)">
             <input type="number" v-model="info.pageIndex" >
             <input type="button" value="跳转" @click="goPage(info.pageIndex)" >
            <!-- 改变也容量 -->
             <select v-model="info.pageSize" @change="getShopList">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
             </select>
         </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from 'axios'
import moment from 'moment'
import {useRouter,useRoute} from "vue-router";
import { ListFormat } from "typescript";
const router=useRouter();
const route=useRoute();

//挂载阶段 相当于文档就绪函数
onMounted(()=>
{
    getShopList();
})

//改变页码
const goPage=(num:any)=>
{
    console.log("num",num);
    if(num<1)
    {
        info.pageIndex=1;
        return;
    }
    if(num>data.totalPage)
    {
        info.pageIndex=data.totalPage;
        return;
    }
    info.pageIndex=num;
    getShopList();
}

//改变页容量
let arr:any=ref([2,3,5]);

//向后端传递的参数
let info:any=reactive({
    shopName:"",//门店名称
    openTime1:"",//开业时间 开始时间
    openTime2:"",//开业时间 结束时间
    pageIndex:1,//页码
    pageSize:2//页容量
})

//接受后端返回的数据
let data:any=reactive({
    
    totalCount:0,//总条数
    totalPage:0,//总页数
    list:[],//数据
});

//获取门店列表
const getShopList=()=>
{
    axios({
        url:"/api/Shop/ShowShop",
        method:"get",
        params:info
    })
    .then((res)=>
    {
        console.log(res);
        //将res.data的数据复制到data
        Object.assign(data,res.data);
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
</script>

<style scoped>
span{
    margin:0 5px;
}
</style>